{% extends "app/base_site.html" %}

{% block title %} 在线视频流 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}

  <div class="right_col" role="main">
    <div class="">
      <div class="row">

      <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="x_panel">
        <div class="x_title">
          <h2>在线视频流
            <span id="top_loading" ><img class="top_loading_img" src="/static/images/load.gif" alt="loading">加载中</span>
            <span id="top_msg"></span>
          </h2>

        <div class="pull-right" >
          <button type="button" onclick="reload()"  class="btn btn-success btn-sm">刷新</button>
        </div>

          <div class="clearfix"></div>
        </div>

        <div class="x_content">
        <!--<p><code>msg</code></p>-->

          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr class="headings">
                  <th class="column-title"># </th>
                  <th class="column-title">视频流名称 </th>
                  <th class="column-title">视频流来源 </th>
                  <th class="column-title">在线人数 </th>
                  <th class="column-title">入口带宽 </th>
                  <th class="column-title">视频信息 </th>
                  <th class="column-title">音频信息 </th>
                  <th class="column-title last"><span class="nobr">操作</span></th>
                </tr>
              </thead>

              <tbody id="data">
              </tbody>
            </table>
          </div>


        </div>
      </div>
    </div>

      </div>

    </div>
  </div>

{% endblock content %}

{% block javascripts %}
  {{ block.super }}

<script>

    let eleData = $("#data");
    let ele_top_loading = $("#top_loading");
    let ele_top_msg= $("#top_msg");

    function reload(){
        window.location.reload();
    }
    function f_edit(code) {
        let url = "/stream/edit?code="+code;
        window.location.href = url;
    }
    function f_open_player(stream_app,stream_name){
        window.open("/stream/player?app="+stream_app+"&name="+stream_name);
    }
    function f_getOnline() {
        ele_top_loading.show();
        $.ajax({
               url: '/stream/getOnline',
               type: "get",
               async: true,
               data: {},
               dataType: "json",
               timeout: 0,
               error: function () {
                   ele_top_loading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   ele_top_loading.hide();
                   let top_msg = res.top_msg;
                   ele_top_msg.html(top_msg);

                   let item_html;
                    eleData.html("");

                   if(1000 === res.code){

                       let data = res.data;
                       let data_length = data.length;

                       if(0===data_length){
                           item_html = "";
                          item_html += "<tr class=\"even pointer\"><td colspan='7'>暂无数据</td></tr>";
                           eleData.append(item_html);
                       }else{
                            for (let i = 0; i < data_length; i++) {
                                 item_html = "";
                               let d = data[i];
                               item_html += "<tr class=\"even pointer\">";
                               item_html += "<td>"+String(i+1)+"</td>";
                                item_html += "<td>"+d["app"]+"/"+d["name"]+"</td>";

                                if(d["source_type"] === 1){
                                     item_html += "<td><a class='sun-a-label'  href=\"javascript:f_edit('"+d["source"]["code"]+"')\" >"+d["source_nickname"]+"</a></td>";
                                }else{
                                      item_html += "<td>"+d["source_nickname"]+"（用户推流）</td>";
                                }
                               item_html += "<td>"+d["clients"]+"</td>";
                               item_html += "<td>"+d["produce_speed"]+"</td>";
                               item_html += "<td>"+d["video"]+"</td>";
                               item_html += "<td>"+d["audio"]+"</td>";
                               item_html += "<td><a class='sun-a-label'  href=\"javascript:f_open_player('"+d["app"]+"','"+d["name"]+"')\" ><i class=\"fa fa-play-circle\"></i> 播放</a></td>";
                               item_html += "</tr>";

                               eleData.append(item_html);
                           }
                        }
                        //setTimeout(function () {f_getOnline();}, 6000);

                   }else{
                        myAlert(res.msg,"error");
                   }
               }
            });

    }
    window.onload = function (){
        f_getOnline();
    };


</script>
{% endblock javascripts %}

